<template>
  <view class="container">
    <view v-for="i in data" :key="i.recordId">
      <view class="card">
        <view class="title">{{ i.title }}</view>
        <text class="time">{{ formatTime(i.signTime) }}</text> 

        <button
          @click="enterSignInPage(i)"
          :disabled="i.status === '已签到' || i.status === '迟到'"
          :style="{
            backgroundColor: i.status === '已签到' ? '#ccc' : i.status === '迟到' ? '#f66' : '#007aff',
            color: '#fff'
          }"
        >
          {{ i.status === '迟到' ? '已截止' : '点击签到' }}
        </button>

        <view v-if="i.status === '已签到'" class="check-in-status">✔ 已签到</view>
        <view v-else-if="i.status === '未签到'" class="not-status">❌未签到</view>
        <view v-else-if="i.status === '迟到'" class="late-status">⚠️ 迟到</view>
      </view>
    </view>
  </view>
</template>


<script setup>
import { ref} from "vue";
import{queryLocationCheckInDataRe} from "@/request/locationRe.js"
import { onShow } from '@dcloudio/uni-app'
const data = ref({});


const enterSignInPage=function(data){
	uni.navigateTo({
		url:'/pages/component/LocationCheckInFull/LocationCheckInFull',
		success: function(res) {
		      res.eventChannel.emit('acceptDataFromOpenerPage', data);
		    }
	})
}
onShow(()=>{
	queryData()
})
const queryData = async function(){
	let id =uni.getStorageSync("stuInfo").studentid
	console.log(id)
	await queryLocationCheckInDataRe(id).then(res=>{
		data.value=res.data.data;
		console.log(data.value);
	}).catch(err=>{
		console.log(err)
	})
}

const formatTime = function(signTime){
	if (!signTime) return '';
	    const [date, time] = signTime.split('T');
	    return `${date} ${time.slice(0, 5)}`;
}

</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px;
  .card {
    width: 500rpx;
    padding: 30rpx;
    border-radius: 20rpx;
    background: #edf2fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	margin-bottom: 50rpx;
    
    .title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 30rpx;
    }
    
    button {
      width: 220rpx;
      height: 60rpx;
      font-size: 28rpx;
      background-color: #409eff;
      color: white;
      border: none;
      border-radius: 10rpx;
      margin-bottom: 20rpx;
    }
    button[disabled] {
      opacity: 0.6;
    }
    .check-in-status {
      font-size: 28rpx;
      color: #67c23a;
    }
    .not-status {
      font-size: 28rpx;
      color: #f56c6c; // 红色，表示未签到
      font-weight: bold;
    }
    .late-status {
      font-size: 28rpx;
      color: #e6a23c; // 橙色，表示迟到
      font-weight: bold;
    }
	.time {
	  font-size: 20rpx;
	  color: gray;
	  margin-bottom: 20rpx;
	}
  }
  
}




</style>
